<script setup>
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { ref, getCurrentInstance } from 'vue'
	import { useUserStore } from '@/store/user'
	import {getCommisList} from '@/api/report'
	const instance = getCurrentInstance().proxy
	
	const user = useUserStore()
	const loading = ref(false)
	const loadStatus = ref('loadmore')
	const query = ref({phoneAndName: '', current: 1, size: 20})
	const triggered = ref(false)
	const total = ref(0)
	const list = ref([])
	const selectList = ref([])
	const style = {
		width: "140rpx",
		height: "76rpx",
		color: "#3c9cff",
		lineHeight: '76rpx',
		backgroundColor: "#fff",
		margin: "0rpx"
	}
	
	function refreshList() {
		if(loadStatus.value === 'loading') return
		loadStatus.value = 'loading'
		triggered.value = true
		list.value = []
		query.value.current = 1
		getCommisList(query.value).then(res => {
			let result = res.result || {}
			let data = result.records || []
			total.value = Number(result.total)
			list.value = data
			triggered.value = false
			let curLength = list.value.length || 0
			loadStatus.value = curLength === total.value? 'nomore' : 'loadmore'
		}).catch(() => {
			triggered.value = false
			loadStatus.value = 'loadmore'
		})
	}
	function lowerList() {
		if(loadStatus.value == 'loadmore' && list.value.length < total.value){
			loadStatus.value = 'loading'
			query.value.current ++
			getCommisList(query.value).then(res => {
				let result = res.result || {}
				let data = result.records || []
				total.value = Number(result.total)
				list.value.push(...data)
				let curLength = list.value.length || 0
				loadStatus.value = curLength === total.value? 'nomore' : 'loadmore'
			}).catch(() => {
				query.value.current --
				loadStatus.value = 'loadmore'
			})
		}
	}
	function search() {
		triggered.value = true
		selectList.value = []
	}
	function add() {
		uni.navigateTo({
			url: '/pages/Organizers/declaration/banquet/helperAdd'
		})
	}
	function submit() {
		const newValue = list.value.filter(item => selectList.value.includes(item.chefId))
		uni.navigateBack({
			success: () => {
				const eventChannel = instance.getOpenerEventChannel()
				eventChannel.emit('selectHelper', uni.$uv.deepClone(newValue))
			}
		})
	}
	
	onLoad(() => {
		const eventChannel = instance.getOpenerEventChannel()
		eventChannel.on('select', list => {
			selectList.value = list.map(item => item.chefId)
		})
	})
	onShow(() => {
		search()
	})
</script>

<template>
	<view :class="['app-container', user.theme]">
		<view class="app-head">
			<uv-search placeholder="请输入姓名或手机号" shape="square" searchIconSize="48" v-model="query.phoneAndName" bgColor="#FFFFFF" borderColor="#fff" 
				:showAction="true" @custom="search" @search="search" actionText="搜索" :actionStyle="style" height="72" :clearabled="false" 
				:custom-style="{borderRadius: '16rpx', overflow: 'hidden'}"></uv-search>
		</view>
		<scroll-view scroll-y="true" class="app-content" refresher-enabled :refresher-triggered="triggered" @refresherrefresh="refreshList" lower-threshold="10" @scrolltolower="lowerList">
			<uv-checkbox-group v-model="selectList" placement="column" iconPlacement="right" :size="user.theme? 40 : 30" :iconSize="user.theme? 30 : 22"
				v-if="list.length">
				<view class="content-list">
					<view class="helper-box" v-for="(item, index) in list" :key="item.chefId">
						<uv-checkbox :name="item.chefId">
							<view class="helper-info">
								<text class="item-name">{{item.assistName}}</text>
								<text class="item-phone">{{item.telephone}}</text>
							</view>
						</uv-checkbox>
					</view>
				</view>
				<uv-load-more :status="loadStatus" :fontSize="user.theme? 36 : 28" :iconSize="user.theme? 48 : 34" isDot line marginTop="20" marginBottom="20">
				</uv-load-more>
			</uv-checkbox-group>
			<empty text="没有找到您搜索的帮厨" v-else></empty>
		</scroll-view>
		<view class="app-bottom">
			<uv-button color="#F5F5F5" shape="circle" text="添加帮厨" :custom-style="{width: '328rpx', height: '84rpx'}" @click="add" :disabled="loading"
				:custom-text-style="{color: '#313233'}"></uv-button>
			<uv-button type="primary" shape="circle" text="确定" :custom-style="{width: '328rpx', height: '84rpx'}" @click="submit"
				:disabled="loading || !selectList.length"></uv-button>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		height: 100vh;
		.app-head{
			padding: 0 32rpx;
			height: 124rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			::v-deep .uv-search__content{
			    border-radius: 0rpx !important;
			}
			::v-deep .uv-search__content__input{
			   font-size: var(--theme-df) !important;
			   line-height: var(--theme-df-line) !important;
			}
			::v-deep .uv-search__action{
				font-size: var(--theme-df) !important;
			}
			::v-deep .uv-search__action::before{
				content: "|";
				color: #ADB0BD;
				position: relative;
				right: 20rpx;
				top: 0;
				z-index: 1000;
			}
		}
		.app-content{
			width: 100%;
			height: calc(100% - 256rpx);
			.content-list{
				padding: 0 32rpx;
				display: flex;
				flex-direction: column;
				gap: 16rpx;
				.helper-box{
					padding: 32rpx 32rpx 32rpx 26rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					.helper-info{
						display: flex;
						align-items: center;
						gap: 16rpx;
						.item-name{
							font-weight: 600;
							font-size: var(--theme-lg);
							line-height: var(--theme-lg-line);
						}
						.item-phone{
							color: #626466;
						}
					}
				}
			}
		}
		.app-bottom{
			height: 132rpx;
			padding: 24rpx 40rpx;
			background-color: #FFFFFF;
			box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(0,0,0,0.04);
			display: flex;
			gap: 30rpx;
			::v-deep .uv-button__text{
				font-size: var(--theme-lg) !important;
			}
		}
	}
</style>